<template>
  <div>
    <el-dialog :visible.sync="visible" :width="width" :show-close="false" align-center :destroy-on-close="true" :close-on-click-modal="false" :close-on-press-escape="false"
    :append-to-body="appendToBody">
      <template #title>
        <div class="my-header" style="display: flex;justify-content: space-between;border-bottom: 1px solid #EAE3E380;padding: 0 20px 10px 20px">
          <div>{{title}}</div>
          <i class="el-icon-close" @click="closeThrowDrawer"></i>
        </div>
      </template>
      <template #default>
        <slot></slot>
      </template>
      <template #footer v-if="hasFooter">
        <slot name="footerBar">
          <div style="display: flex;align-items:center;justify-content: flex-end;">
            <el-button @click="closeThrowDrawer">{{closeText}}</el-button>
            <el-button type="primary" @click="sumitEmit">{{submitText}}</el-button>
          </div>
        </slot>
      </template>
    </el-dialog>
  </div>
</template>
<script>
 export default {
   name:'ElDialogComp',
   props:{
     title:{
       type:String,
       default:"选择"
     },
     width:{
       type:String,
       default:"100%"
     },
     hasFooter:{
       type:Boolean,
       default:false
     },
     submitText:{
       type:String,
       default:"确定"
     },
     closeText:{
       type:String,
       default:"取消"
     },
     appendToBody:{
       type:Boolean,
       default:false
     }
   },
   data(){
     return {
       visible:false
     }
   },
   methods:{
     throwOpenDialog(){
       this.visible = true
     },
     closeDialog(){
       this.visible = false
     },
     closeThrowDrawer(){
       this.$emit('throwCloseDialog')
       this.closeDialog()
     },
     sumitEmit(){
       this.$emit('throwDialogEmit')
     }
   }
 }
</script>

<style scoped lang="scss">
::v-deep .el-dialog__header{
  padding: 20px 0 0 0;
  margin-right:0;
}
::v-deep .el-dialog{
  display: flex;
  flex-direction: column;
  margin:0 !important;
  position:absolute;
  top:40%;
  left:50%;
  transform:translate(-50%,-50%);
  max-height:calc(100% - 30px);
  max-width:calc(100% - 30px);
}
::v-deep .el-dialog__body{
  flex:1;
  overflow: auto;
  padding: 10px;
}
</style>
